<template>
  <div class="main">
    <div class="cont">
      <div class="basic-info">
        <div class="title">{{meetingInfo.meetingName}}</div>
        <div class="descript editor-content"
          v-html="meetingInfo.introduce"></div>
        <!-- <div class="descript"
          :class="{fold: meetingInfo.introduce.length > 130 && isFold}">
          {{meetingInfo.introduce}}
          <span class="more no-fold"
            v-show="meetingInfo.introduce.length > 130 && isFold"
            @click="handleFold()"><i>...</i>查看全部</span>
          <span class="more"
            v-show="meetingInfo.introduce.length > 130 && !isFold"
            @click="handleFold()">收起全部</span>
        </div> -->
      </div>
      <div class="place-time">
        <ul class='basic-list'>
          <li class='basic-item'>
            <span class='item-icon address'></span>
            <span class='item-text'>{{meetingInfo.province}}{{meetingInfo.city}}{{meetingInfo.district}}{{meetingInfo.address}}</span>
          </li>
          <!-- 当会议只在当天时进行时显示当天的时间段 -->
          <li class='basic-item'
            v-if="isSameDay">
            <span class='item-icon time'></span>
            <span class='item-text time'>{{meetingTimeSameDay[0]}}</span>
          </li>
          <!-- 当会议是跨天的，无议程时 -->
          <li class='basic-item'
            v-if="!isSameDay && meetingInfo.agenda && meetingInfo.agenda.length <= 1">
            <span class='item-icon time'></span>
            <div class="period">
              <p class="text">{{noneOrSingleAgenda[0]}}</p>
              <p class="text">{{noneOrSingleAgenda[1]}}</p>
            </div>
          </li>
          <!-- 当会议是跨天的，有议程时，显示第一个议程的时间段和最后一个议程的时间段 (要考虑议程是否跨天)-->
          <li class='basic-item'
            v-if="!isSameDay && meetingInfo.agenda && meetingInfo.agenda.length > 1">
            <span class='item-icon time'></span>
            <div class="period">
              <p class="text">{{multipleAgendaStart}}</p>
              <p class="text">{{multipleAgendaEnd}}</p>
            </div>
          </li>
        </ul>
        <div class="btn"
          @click="saveSign()">签到</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isFold: true,
      meetingId: this.$route.query.meetingId,
      isLoading: false,
      meetingInfo: {
        meetingName: '',
        introduce: '',
        meetingStartTime: '',
        meetingStopTime: '',
        meetingTime: '',
        province: '',
        city: '',
        district: '',
        address: ''
      },
      // 会议开始结束时间是否是同一天
      isSameDay: null
    }
  },
  computed: {
    // 当会议只在当天时进行时，显示当天的时间段
    meetingTimeSameDay () {
      let timeArr = this.formatDate(this.meetingInfo.meetingStartTime, this.meetingInfo.meetingStopTime)
      return timeArr[0]
    },
    // 当会议是跨天的，无议程或议程为1个时，显示会议开始结束时间
    noneOrSingleAgenda () {
      let timeArr = this.formatDate(this.meetingInfo.meetingStartTime, this.meetingInfo.meetingStopTime)
      return timeArr
    },
    // 当会议是跨天的，有议程时，显示第一个议程的时间段和最后一个议程的时间段（考虑议程跨天）(考虑议程跨天)
    // 多议程第一个议程时间
    multipleAgendaStart () {
      let timeArr = this.formatDate(this.meetingInfo.agenda[0].agendaStartTime, this.meetingInfo.agenda[0].agendaStopTime)
      if (timeArr.length > 1) {
        return `${timeArr[0]} ~ ${timeArr[1]}`
      } else {
        return timeArr[0]
      }
    },
    // 多议程最后议程的时间
    multipleAgendaEnd () {
      let timeArr = this.formatDate(this.meetingInfo.agenda[this.meetingInfo.agenda.length - 1].agendaStartTime, this.meetingInfo.agenda[this.meetingInfo.agenda.length - 1].agendaStopTime)
      if (timeArr.length > 1) {
        return `${timeArr[0]} ~ ${timeArr[1]}`
      } else {
        return timeArr[0]
      }
    }
  },
  methods: {
    // 提交签到
    saveSign () {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/attender/sign`
      let params = {
        meetingId: this.meetingId,
        userId: sessionStorage.getItem('userId'),
        agentId: sessionStorage.getItem('agentId')
      }
      this.$posts(url, params).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.$toast(res.message)
          history.go(-1)
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 获取会议信息
    fetchMeetingInfo () {
      this.$_load.show()
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/detail/${this.meetingId}/${sessionStorage.getItem('userId')}`
      this.$get(url).then(res => {
        this.$_load.hide()
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.meetingInfo = data
            this.meetingStatus = data.eventOpen
            this.judgeSameDay()
          }
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 判断两个日期是否为同意一天
    judgeSameDay () {
      let startTime = new Date(this.meetingInfo.meetingStartTime)
      let endTime = new Date(this.meetingInfo.meetingStopTime)
      // 会议时间是否跨天
      this.isSameDay = startTime.setHours(0, 0, 0, 0) === endTime.setHours(0, 0, 0, 0)
    },
    // 控制折叠
    handleFold () {
      this.isFold = !this.isFold
    }
  },
  created () {
    this.fetchMeetingInfo()
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  min-height 100vh
  background url('~assets/img/sign_bg@3x.png') no-repeat center top/ 100% auto
  padded_box(border-box,24px 12px)
  .cont
    width 100%
    background #fff
    border-radius 12px
    .basic-info
      width 100%
      padded_box(border-box,24px 12px)
      position relative
      &::after
        content ''
        display block
        width calc(100% - 26px)
        height: 1px;
        background-image: linear-gradient(to right, #eee 0%, #eee 50%, transparent 50%);
        background-size: 10px 1px;
        background-repeat: repeat-x;
        position absolute
        bottom 0
        left 50%
        transform translate(-50%, 0)
      .title
        width 100%
        height 22px
        line-height 22px
        font-size 16px
        font-weight 700
        color #333
        noWrap()
      .descript
        width 100%
        // line-height 20px
        // font-size 14px
        // color #666666
        // margin-top 8px
        // position relative
        // &.fold
        //   height 100px
        //   ellipsis(5)
        // .more
        //   float right
        //   line-height 20px
        //   font-size 12px
        //   color #0080ff
        //   &.no-fold
        //     float none
        //     display inline-block
        //     background #fff
        //     position absolute
        //     right 0
        //     bottom -1px
        //     i
        //       font-size 14px
        //       color #666
        //       margin-right 12px
    .place-time
      width 100%
      padded_box(border-box,24px 10px 40px)
      .basic-list
        padded_box(border-box,0 2px)
        .basic-item
          display flex
          & + .basic-item
            margin-top 12px
          .item-icon
            width 20px
            height 20px
            background-repeat no-repeat
            background-position center
            background-size 16px
            margin-right 4px
            &.time
              background-image url('~assets/img/icon_time@3x.png')
            &.address
              background-image url('~assets/img/icon_location@3x.png')
          .item-text
            width calc(100% - 22px)
            height 20px
            font-size: 14px;
            color: #666666;
            line-height: 20px
            noWrap()
            &.time
              font-size 16px
          .period
            width 100%
            position relative
            &::before
              content ''
              display block
              width 1px
              height 43px
              background #eee
              position absolute
              left 3px
              top 50%
              transform translate(0, -50%)
            .text
              line-height: 20px;
              font-size: 14px;
              color: #666;
              padded_box(border-box, 0 0 0 12px)
              position relative
              & + .text
                margin-top 6px
              &::before
                content ''
                display block
                width 7px
                height 7px
                background url('~assets/img/icon_round@3x.png') no-repeat center/100%
                position absolute
                top 50%
                left 0
                transform translate(0,-50%)
      .btn
        width 100%
        height 42px
        background #0080FF
        line-height 18px
        text-align center
        font-size 14px
        color #fff
        border-radius 21px
        padded_box(border-box, 12px 0)
        margin-top 32px
</style>
